<template>
  <div id="main" style="width: 1200px; height: 400px"></div>
</template>

<script>

import debounce from "lodash.debounce"
export default {
  name: "DemonBeastAnalysis",
  data(){
    return {
      demonBeastList:[],
      demonBeastRandList:[],
      inverterMonTimer: null,//设置定时刷新，五分钟一次
      loading: false,
    }
  },

  methods: {
    drawChart(num,name) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "妖兽等级数量分析",
        },
        tooltip: {},
        legend: {
          data: ["数量"],
        },
        xAxis: {
          data: name,
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: num,
            label: {
              show: true
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    demonBeastAnalysis:debounce(
        function () {
          //判断定时刷新是否存在，存在先清除
          if (this.inverterMonTimer) {
            clearInterval(this.inverterMonTimer);
            this.inverterMonTimer = null;
          }
          this.$getRequest("/system/demon_beast/analysis").then(resp=>{
            if(resp){
              console.log(JSON.stringify(resp));
              this.demonBeastList = [];
              this.demonBeastRandList = [];
              this.demonBeastList = resp["obj"].demon_beast_num;
              this.demonBeastRandList = resp["obj"].demon_beast_rank_name;
              this.drawChart(this.demonBeastList , this.demonBeastRandList);

              //设置五分钟一次的定时刷新
              this.$nextTick(() =>{
                this.inverterMonTimer = setInterval(() =>{
                  this.demonBeastAnalysis();
                },60000);
              });
            }
          }).catch((error) =>{
            console.log(error);
            this.loading = false;
            return false;
    });
    this.loading = true;
    },200,{ leading: true,trailing: false }),
  },

  mounted() {
    //window.setInterval(()->{
      this.demonBeastAnalysis();
    //}, 5000);

  },
  activated() {
     if (this.inverterMonTimer) {
       clearInterval(this.inverterMonTimer);
       this.inverterMonTimer = null;
      }
      this.demonBeastAnalysis();
  },
 deactivated() {
   if (this.inverterMonTimer){
     clearInterval(this.inverterMonTimer);
     this.inverterMonTimer = null;
   }
 },
 beforeDestroy() {
   if (this.inverterMonTimer) {
     clearInterval(this.inverterMonTimer);
     this.inverterMonTimer = null;
   }
 },
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>